<template>

    <ul>
        <li :style="{opacity}">欢迎学习Vue</li>
        <li>news001 <input type="text"></li>
        <li>news002 <input type="text"></li>
        <li>news003 <input type="text"></li>
    </ul>
</template>
<script>
    export default {
        name: 'News',
        data() {
            return {
                opacity: 1
            }
        },
        // mounted() {
        //     this.timer = setInterval(() => {
        //         this.opacity -= 0.1
        //         if (this.opacity <= 0)
        //             return this.opacity = 1
        //     }, 10);
        // },
        // beforeDestroy() {
        //     console.log("News组件被销毁了");
        //     clearInterval(this.timer)
        // }
        //引出新的生命周期
        //被激活
        activated() {
            console.log('New组件被激活了');
            this.timer = setInterval(() => {
                this.opacity -= 0.1
                if (this.opacity <= 0)
                    return this.opacity = 1
            }, 10);
        },
        //失活
        deactivated() {
            console.log('New组件被失活了');
            clearInterval(this.timer)
        },
    }
</script>
<style>
</style>